<template>
  <div>
    <!--第一部分顶部-->
    <div class="header">
      <div class="header_box">
                <span class="center">
                    党员e家
                </span>
        <router-link to="/zzjg/useList">
          <span class="login">组织架构</span>
        </router-link>
      </div>
    </div>
    <!--第二部轮播图-->
    <div class="home-head">
      <div class="banner-bg">
      </div>
      <div class="banner-box">
        <div class="swiper-container banner-swiper">
          <mt-swipe :auto="2000" :show-indicators="false" @change="handleChange">
            <mt-swipe-item v-for="(item,index) in list" :key="index">
              <router-link v-bind="{to:'/lbt/carousel/'+item.id}">
                <!--请求图片数据-->
                <!--<img :src="item.img_url" alt="">-->
                <img src="../../statics/imgs/images/img.jpg" alt="">
                <img src="../../statics/imgs/images/img.jpg" alt="">
                <img src="../../statics/imgs/images/img.jpg" alt="">
                <img src="../../statics/imgs/images/img.jpg" alt="">
                <p class="sliderStyle">{{item.title}}</p>
              </router-link>
            </mt-swipe-item>
          </mt-swipe>
        </div>
        <div class="dot-wrap">
          <ul>
            <li class="item" v-for="(item,index) in dotlist" :class="{active:currentindex===index}">{{item}}</li>
          </ul>
        </div>
      </div>
      <!--第三部学习部分-->
      <div class="mui-content">
        <ul class="mui-table-view mui-grid-view mui-grid-9">
          <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
            <router-link to="/xxyd/studyList">
              <span class="mui-icon mui-icon-home"></span>
              <div class="mui-media-body">学习园地</div>
            </router-link>
          </li>
          <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
            <router-link to="/boutique/boutiquelist">
              <span class="mui-icon mui-icon-email"></span>
              <div class="mui-media-body">制度汇编</div>
            </router-link>
          </li>
          <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
            <router-link to="/phones/phonelist">
              <span class="mui-icon mui-icon-chatbubble"></span>
              <div class="mui-media-body">移动党校</div>
            </router-link>
          </li>
          <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
            <router-link to="/activity/activitylist">
              <span class="mui-icon mui-icon-location"></span>
              <div class="mui-media-body">以考促学</div>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
    <!--第四部动态新闻-->
    <section>
      <div>
        <router-link to="dynamicNews/dynamicNewsList">
        <div class="text-container">
          <div class="inner-container">
            <p class="text" v-for="(text, index) in news" :key="index">{{text.name}}</p>
          </div>
        </div>
        </router-link>
      </div>
    </section>
    <!--第五部小支队·大舞台-->
    <section>
      <div class="home-list">
        <div class="section section1">
          <div class="product_title">
            <div class="section-title">
              <h2>
                小支部·大舞台
              </h2>
              <router-link to="/xzbdwt/grandStage">全部 &gt;</router-link>
            </div>
          </div>
          <div class="section-main">
            <!-- 最多2条，最新的两条 -->
            <ul>
              <li v-for="(itemd,nub) in grandStage" v-if="nub<2" @click="item(itemd)">
                <!--<img :src=itemd.img_url>-->
                <img src="../../statics/imgs/images/img.jpg" alt="">
                <p>基层党建专报123455667</p>
                <!--<p>{{itemd.title}}</p>-->
                <em>07-13</em>
              </li>
            </ul>
          </div>
        </div>

        <!-- 典型风采 -->
        <div class="section section2">
          <div class="section-title">
            <h2>
              典型风采
            </h2>
            <router-link to="/jdfc/classicsAll">全部 &gt;</router-link>
          </div>
          <div class="section-main">
            <!-- 固定的3项头衔，取各个头衔最新的记录 -->
            <ul>
              <li v-for="(getModel,nub) in grandStage" v-if="nub<3" @click="getModels(getModel)">
                <!--<span>{{getModel.click}}</span>-->
                <span>最美身边人</span>
                <!--<em>{{getModel.click}}</em>-->
                <em>王小明</em>
                <!--<img :src=getModel.img_url>-->
                <img src="../../statics/imgs/images/img.jpg" alt="">
              </li>
            </ul>
          </div>
        </div>
        <!-- 党员服务 -->
        <div class="section section3">
          <div class="section-title">
            <h2>
              党员服务
            </h2>
            <router-link to="/dyff/partyMemberList">全部 &gt;</router-link>
          </div>
          <div class="section-main">
            <!-- 最多3条，最新的3条 -->
            <ul>
              <li v-for="(getModelServeTemp,nub) in grandStage" v-if="nub<3" @click="getModelServes(getModelServeTemp)">
                <!--<img :src=getModelServeTemp.img_url>-->
                <img src="../../statics/imgs/images/img.jpg" alt="">

                <div>
                  <!--<p>{{getModelServeTemp.title}}</p>-->
                  <p>2018年3月党费收支情况汇报</p>
                  <!--<em>{{getModelServeTemp.click}}</em>-->
                  <em>07-13</em>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <section>
      <!-- 信息列表2 -->
      <div class="home-list" style="margin-bottom: 0">
        <!-- 党员心声 -->
        <div class="section section4">
          <div class="section-title">
            <h2>
              党员心声
            </h2>
            <router-link to="/dyxs/partyAspirationsList">全部 &gt;</router-link>
          </div>
          <div class="section-main">
            <!-- 最多2条，最新的2条 -->
            <ul>
              <li v-for="(getAspiration,nub) in getAspirationsList" v-if="nub<2"
                  @click="getAspirationTemp(getAspiration)">
                <div>
                  <span>郑党员：</span>
                </div>
                <p>如果你无法简洁表达你的想法，那只说明你还不够明白。那只说明你还不够明白。</p>
              </li>
            </ul>
          </div>
        </div>

        <!-- 先锋论坛 -->
        <div class="section section5">
          <div class="section-title">
            <h2>
              先锋论坛
            </h2>
            <router-link to="/xflt/pioneerForumList">全部 &gt;</router-link>
          </div>
          <div class="section-main">
            <!-- 最多3条，最新的3条 -->
            <ul>
              <li v-for="(gePioneerForum,temp) in getPioneerForumList" v-if="temp<3"
                  @click="linkPioneerForum(gePioneerForum)">
                <div class="titie">
                  帖子标题帖子标题
                </div>
                <div class="sub">
                  <span>郑党员</span>
                  <em>07-13 16:44</em>
                </div>
                <p>如果你无法简洁表达你的想法，那只说明你还不够明白。</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>

  </div>
</template>
<script>
  import {Toast} from 'mint-ui';
  import urlkit from "../kits/urlkit.js";//测试接口
  import kit from '../kits/apikit.js';//临时接口
  import slider from './subcom/slider.vue';

  export default {
    components: {
      slider
    },
    data() {
      return {
        //1.轮播图参数
        list: [],
        currentindex: 0,
        dotlist: [],
        //5.动态新闻
        news: [],
        // 5.小支队 大舞台
        grandStage: [],
        //第六回去典型风采
        getModel: [],
        //第七部分 党员服务
        getModelServeTemp: [],
        //第七部分 党员心声
        getAspirationsList: [],
        //先锋论坛
        getPioneerForumList: [],
      }
    },
    created() {
      this.getimgs();
      //第四部分动态新闻
      this.dynamicNews();
      //第五小支部大舞台
      this.getGrandStage();
      //第六回去典型风采
      this.getModelBeautiful();
      //第七部分 党员服务
      this.getModelServe();
      //党员心声
      this.getAspirations();
      //先锋论坛
      this.pioneerForum();
    },
    methods: {
      //第二部分轮播图
      initdot() {
        setTimeout(() => {
          this.$nextTick(() => {
            this.dotlist = new Array(this.list.length)
          })

        }, 40)
      },
      handleChange(index) {
        this.currentindex = index;
      },
      //临时接口
      // getimgs() {
      //   var url = kit.apikit + 'type=getnewslist';
      //   // 2.0 调用$http.get()
      //   this.$http.get(url).then(function (response) {
      //     //错误处理
      //     if (response.body.status != 0) {
      //       Toast(response.body.message);
      //       return;
      //     }
      //     this.list = response.body.message;
      //     setTimeout(() => {
      //       this.initdot()
      //     }, 20);
      //   });
      // },
      //假数据
      getimgs() {
        this.list = [
          {img_url: '../../statics/imgs/images/img.jpg', title: '习近平同志系列重要讲话'},
          {img_url: '../../statics/imgs/images/img.jpg', title: '习近平同志系列重要讲话'},
          {img_url: '../../statics/imgs/images/img.jpg', title: '习近平同志系列重要讲话'},
          {img_url: '../../statics/imgs/images/img.jpg', title: '习近平同志系列重要讲话'},

        ];
        setTimeout(() => {
          this.initdot()
        }, 20);
      },

      //5.动态新闻
      dynamicNews() {
        this.news = [
          {name: "1走基层 讲党课 参观陈列馆 我市各单位开展丰富开展丰富"},
          {name: "2走基层 讲党课 参观陈列馆 我市各单位开展丰富开展丰富"},
          {name: "3走基层 讲党课 参观陈列馆 我市各单位开展丰富开展丰富"},
          {name: "4走基层 讲党课 参观陈列馆 我市各单位开展丰富开展丰富"},
          {name: "5走基层 讲党课 参观陈列馆 我市各单位开展丰富开展丰富"},
          {name: "6走基层 讲党课 参观陈列馆 我市各单位开展丰富开展丰富"},
          {name: "7走基层 讲党课 参观陈列馆 我市各单位开展丰富开展丰富"},
        ]
      },
      //小支部 大舞台
      getGrandStage() {
        var url = kit.apikit + 'type=getnewslist';
        this.$http.get(url).then(function (res) {
          var body = res.body;
          if (body.status != 0) {
            Toast(body.messge);
            return;
          }
          this.grandStage = body.message;
          // console.log(this.grandStage);
        });
      },
      item(itemd) {
        this.$router.push({
          path: "/xzbdwt/smallBranch/",
          query: {
            id: itemd.id
          }
        })
      },
      // 典型风采
      getModelBeautiful() {
        var url = kit.apikit + 'type=getnewslist';
        this.$http.get(url).then(function (res) {
          var body = res.body;
          if (body.status != 0) {
            Toast(body.messge);
            return;
          }
          this.getModel = body.message;
        });
      },
      getModels(getModel) {
        this.$router.push({
          path: "/jdfc/classicsInfo/",
          query: {
            id: getModel.id
          }
        })
      },
      //党员服务
      getModelServe() {
        // var url = 'http://192.168.2.78:8088/party/api/pageActivity?pageNum=1&pageSize=2&userCode&orgCode';//测试环境
        var url = kit.apikit + 'type=getnewslist';//测试环境
        this.$http.get(url).then(function (res) {
          var body = res.body;
          if (body.status != 0) {
            Toast(body.messge);
            return;
          }
          this.getModelServeTemp = body.message;
        });
      },
      getModelServes(getModelServeTemp) {
        this.$router.push({
          path: "/dyff/partyMemberInfo",
          query: {
            id: getModelServeTemp.id
          }
        })
      },
      //党员心声
      getAspirations() {
        var url = kit.apikit + 'type=getnewslist';//测试环境
        this.$http.get(url).then(function (res) {
          var body = res.body;
          if (body.status != 0) {
            Toast(body.messge);
            return;
          }
          this.getAspirationsList = body.message;
          console.log(this.getAspirationsList);
        });
      },
      getAspirationTemp(temp) {
        this.$router.push({
          path: "/dyxs/partyAspirationsInfo/",
          query: {
            id: temp.id
          }
        })
      },
//先锋论坛
      pioneerForum() {
        var url = kit.apikit + 'type=getnewslist';//测试环境
        this.$http.get(url).then(function (res) {
          var body = res.body;
          if (body.status != 0) {
            Toast(body.messge);
            return;
          }
          this.getPioneerForumList = body.message;
        });
      },
      linkPioneerForum(lik) {
        console.log(lik);
        this.$router.push({
          path: "/xflt/pioneerForumInfo",
          query: {
            id: lik.id
          }
        })
      }
    }
  }
</script>
<style scoped lang="less">
  /*第一部分 头部样式设置*/
  .header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: #4284D8;
    box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, .1);
  }

  .header .header_box {
    width: 100%;
    height: .9rem;
    margin: 0 auto;
    position: relative;
    background-color: #4284D8;
    box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, .1);
  }

  .header .header_box .center {
    position: absolute;
    line-height: .9rem;
    width: 3rem;
    left: 50%;
    margin: 0 0 0 -1.5rem;
    text-align: center;
    font-size: .35rem;
    color: #fff;
  }

  .header .header_box .icon_logo {
    -webkit-background-size: 200px 200px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0.7rem;
    background: url("../../statics/imgs/images/back.png") no-repeat 0.3rem center;
    background-size: 0.32rem 0.32rem;
  }

  .header .header_box .login {
    width: 1.5rem;
    line-height: .9rem;
    position: absolute;
    top: 0;
    right: 5px;
    font-size: .3rem;
    text-align: center;
    color: #fff;
    opacity: .6;
  }

  /*第二部分 轮播图*/
  .mint-swipe-items-wrap img {
    width: 100%;
    height: 100%;
  }

  .mint-swipe-item .sliderStyle {
    position: absolute;
    top: 3rem;
    background: rgba(0, 0, 0, .3);
    width: 100%;
    color: #fff;
    font-size: .3rem;
    height: .3rem;
    line-height: .1rem;
    padding: .3rem;
    overflow: hidden;
  }

  .dot-wrap {
    text-align: center;
    margin-top: .2rem;
  }

  .item {
    width: .2rem;
    height: .2rem;
    background: #cacaca;
    display: inline-block;
    margin: 0 .1rem;
    border-radius: 50%;
  }

  .active {
    width: .6rem;
    height: .2rem;
    background: #f46b49;
    border-radius: 5px;
  }

  /*第三部分 学习原地*/
  .mui-content {
    margin-top: -.3rem;
  }

  .mui-content .mui-table-view .mui-col-sm-3 a .mui-media-body {
    font-size: .28rem;
  }

  .mui-grid-view.mui-grid-9 {
    background-color: #fff;
    border-left: none;
    border-top: none;
  }

  .mui-grid-view.mui-grid-9 .mui-table-view-cell {
    border-right: none;
    border-bottom: none;
  }

  .mui-icon-home:before,
  .mui-icon-email:before,
  .mui-icon-chatbubble:before,
  .mui-icon-location:before {
    content: '';
    width: 50px;
    height: 50px;
    display: inline-block;
    background-size: cover;
  }

  .mui-icon-home:before {
    background-image: url("../../statics/imgs/images/img.jpg");
    width: 65px;
  }

  .mui-icon-email:before {
    background-image: url("../../statics/imgs/images/img.jpg");
    width: 65px;
  }

  .mui-icon-chatbubble:before {
    background-image: url("../../statics/imgs/images/img.jpg");
    width: 65px;
  }

  .mui-icon-location:before {
    background-image: url("../../statics/imgs/images/img.jpg");
    width: 65px;
  }

  /*第四部分 动态信息*/
  .text-container {
    background: #FFF8E5 url("../../statics/imgs/images/tip.gif") no-repeat left center;
    background-size: .8rem .8rem;
    padding: 0 .3rem 0 .7rem;
    height: .6rem;
    line-height: .7rem;
    overflow: hidden;
    margin-top: .3rem;
  }

   .inner-container {
    animation: myMove 5s linear infinite;
    animation-fill-mode: forwards;
  }
  .inner-container p.text{
    width: 200%;
    font-size: .27rem;
    color: #EC542E;
    margin-bottom: -.1rem;
  }

  /*文字无缝滚动*/
  @keyframes myMove {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-5rem);
    }
  }

  /*文字停顿滚动*/
  @keyframes myMove2 {
    0% {
      transform: translateY(0);
    }
    10% {
      transform: translateY(-.5rem);
    }
    20% {
      transform: translateY(-1rem);
    }
    30% {
      transform: translateY(-1.5rem);
    }
    40% {
      transform: translateY(-2rem);
    }
    50% {
      transform: translateY(-2.5rem);
    }
    60% {
      transform: translateY(-3rem);
    }
    70% {
      transform: translateY(-3.5rem);
    }
    80% {
      transform: translateY(-4rem);
    }
    90% {
      transform: translateY(-4.5rem);
    }
    100% {
      transform: translateY(-5rem);
    }
  }
</style>

